<template>
	<div class="excel-import-container">
		<!-- <h2 class="page-title">成绩导入</h2> -->

		<el-card class="import-card">
			<template #header>
				<div class="card-header">
					<span>Excel成绩导入</span>
					<!-- <el-button type="primary" @click="downloadTemplate">下载模板</el-button> -->
				</div>
			</template>

			<div class="import-steps">
				<el-steps :active="activeStep" finish-status="success" simple>
					<el-step title="上传文件" />
					<el-step title="数据预览" />
					<el-step title="数据处理" />
					<el-step title="导入确认" />
				</el-steps>
			</div>

			<div class="step-content">
				<!-- 步骤1: 上传文件 -->
				<div v-if="activeStep === 1" class="step-upload">
					<FileUploader @file-selected="handleFileSelected" @file-parsed="handleFileParsed" />
				</div>

				<!-- 步骤2: 数据预览 -->
				<div v-if="activeStep === 2" class="step-preview">
					<DataPreview
						:excel-data="excelData"
						:headers="headers"
						@preview-confirmed="handlePreviewConfirmed"
						@go-back="activeStep = 1"
					/>
				</div>

				<!-- 步骤3: 数据处理 -->
				<div v-if="activeStep === 3" class="step-processing">
					<DataProcessing
						:excel-data="excelData"
						:headers="headers"
						@processing-confirmed="handleProcessingConfirmed"
						@go-back="activeStep = 2"
					/>
				</div>

				<!-- 步骤4: 导入确认 -->
				<div v-if="activeStep === 4" class="step-confirm">
					<ImportConfirmation
						:excel-data="processedData"
						:headers="headers"
						@import-success="handleImportSuccess"
						@import-failed="handleImportFailed"
						@go-back="activeStep = 3"
					/>
				</div>
			</div>
		</el-card>

		<!-- 导入历史记录
		<el-card class="history-card">
			<template #header>
				<div class="card-header">
					<span>导入历史</span>
					<el-button type="info" @click="refreshHistory">刷新</el-button>
				</div>
			</template>

			<ImportHistory @view-details="viewHistoryDetails" />
		</el-card> -->
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import FileUploader from './components/FileUploader.vue'
import DataPreview from './components/DataPreview.vue'
import DataProcessing from './components/DataProcessing.vue'
import ImportConfirmation from './components/ImportConfirmation.vue'
import ImportHistory from './components/ImportHistory.vue'

// 当前步骤
const activeStep = ref(1)

// Excel数据
const excelData = ref<any[]>([])
const headers = ref<string[]>([])
// 处理后的数据
const processedData = ref<{ data: any[]; options: any }>({ data: [], options: {} })

// 处理文件选择
const handleFileSelected = () => {
	// 文件选择后的处理，由FileUploader组件处理具体逻辑
}

// 处理文件解析完成
const handleFileParsed = (data: any[], fileHeaders: string[]) => {
	console.log('=== 接收解析数据 ===')
	console.log('数据行数：', data.length, '表头数量：', fileHeaders.length)

	excelData.value = data
	headers.value = fileHeaders
	activeStep.value = 2 // 进入预览步骤
}

// 处理预览确认
const handlePreviewConfirmed = () => {
	activeStep.value = 3 // 进入数据处理步骤
	console.log('步骤2：', excelData.value)
}

// 处理数据处理确认
const handleProcessingConfirmed = (processedResult: { data: any[]; options: any }) => {
	console.log('处理后的数据： ', processedResult)

	processedData.value = processedResult
	activeStep.value = 4 // 进入导入确认步骤
}

// 处理导入成功
const handleImportSuccess = () => {
	ElMessage.success('成绩导入成功')
	activeStep.value = 1 // 重置步骤
	excelData.value = []
	headers.value = []
	processedData.value = { data: [], options: {} }
	refreshHistory() // 刷新历史记录
}

// 处理导入失败
const handleImportFailed = (error: string) => {
	ElMessage.error(`导入失败: ${error}`)
}

// 下载Excel模板
const downloadTemplate = () => {
	// 实现下载模板的逻辑
	ElMessage.info('模板下载中...')
	// 这里可以调用下载模板的API
}

// 刷新历史记录
const refreshHistory = () => {
	// 刷新导入历史记录的逻辑
}

// 查看历史详情
const viewHistoryDetails = (id: number) => {
	// 查看导入历史详情的逻辑
}
</script>

<style lang="scss" scoped>
.excel-import-container {
	padding: 20px;

	.page-title {
		margin-bottom: 20px;
		color: var(--el-text-color-primary);
	}

	.import-card {
		margin-bottom: 20px;

		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.import-steps {
			margin: 20px 0;
		}

		.step-content {
			min-height: 300px;

			.step-upload {
				display: flex;
				justify-content: center;
				padding: 20px 0;
			}

			.step-preview,
			.step-processing,
			.step-confirm {
				padding: 20px 0;
			}
		}
	}

	.history-card {
		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
}
</style>
